<!-- -->
<template>
  <div class="index">
    <el-container>
      <el-header>
        <el-input placeholder="请输入内容" v-model="search" clearable>
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-header>
      <el-main>
        <div class="rotation">
          <el-carousel indicator-position="outside" height="550px">
            <el-carousel-item v-for="item in imageList" :key="item">
              <img :src="item" alt="" />
            </el-carousel-item>
          </el-carousel>

          <!-- <el-carousel
            :interval="2000"
            type="card"
            height="400px"
            indicator-position="outside"
            :autoplay="true"
          >
            <el-carousel-item v-for="item in imageList" :key="item">
              <img :src="item" alt="" />
            </el-carousel-item>
          </el-carousel> -->
        </div>

        <div class="content">
          <el-tabs v-model="editableTabsValue">
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.id"
            >
            <span slot="label" 
              @click="getGoodsList(item.id)">{{item.name}}</span>
              <div class="goodsList" v-for="i in result" :key="i.id">
                <img :src="i.imageUrl" alt="" />
                <div style="width:100%">
                  <span class="textSetting">{{ i.name }}</span>
                </div>
                <p class="textSetting">{{ i.description }}</p>
                <div class="buttonList">
                  <el-button size="small" type="danger" @click="addCart(i.id)"
                    >加入购物车</el-button
                  >
                  <el-button
                    size="small"
                    type="primary"
                    @click="goToDetail(i.id)"
                    >查看详情</el-button
                  >
                </div>
              </div>
              <!-- <div
                class="goodsList"
                v-for="key in item.content"
                :key="key.id"
                @click="showDetails(key.id)"
              >
                <el-image :src="key.imgList[0]" alt="图片无法显示" />
                <h1>{{ key.name }}</h1>
                <p>{{ key.description }}</p>
                <div class="buttonList">
                  <el-button size="small" type="danger">加入购物车</el-button>
                  <el-button size="small" type="primary">查看详情</el-button>
                </div>
              </div> -->
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> -->
        <!-- <div class="footer">
          
        </div> -->
      </el-main>
      <el-footer>
        <span
          >东莞理工学院17级实训 @第六组 &nbsp;&nbsp; &nbsp;&nbsp;
          _版权所有</span
        >
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      result:[],
      userId: "",
      search: "",
      status: 0,
      // 轮播图
      imageList: [
        require("../assets/image1.jpg"),
        require("../assets/image2.jpg"),
        require("../assets/image3.jpg")
      ],
      // 商品列表
      list: [],
      editableTabsValue: "2",
      editableTabs: [],
      tabIndex: 2
    };
  },
  created() {
    // this.getAllpicture();
    this.getList();
    this.userId = sessionStorage.getItem("userId");
  },

  components: {},

  filters: {},

  computed: {},

  methods: {
    enter() {
      this.status = 1;
    },
    leave() {
      this.status = 0;
    },
    
    Fail(index) {
      this.$message.error(index);
    },
    Success(index) {
      this.$message.success(index);
    },
    getAllpicture() {
      this.axios.get("/api/getImages/").then(res => {
        console.log(res.data.list);
        let list = res.data.list;
        this.List = list;
        console.log(this.List);
      });
    },
    getList() {
      this.axios
        .get("/api/goodsCategory")
        .then(res => {
          // console.log(res.data);
          let result = res.data.data;
          let bufferList = [];
          for (let key in result.list) {
            let i = new Object();
            i.name = result.list[key].name;
            i.id = result.list[key].id;
            i.label = result.list[key].name;
            bufferList.push(i);
          }
          this.editableTabs = bufferList;
          // console.log(this.editableTabs);
        })
        .catch(err => {
          console.log(err);
        });
    },
    getGoodsList(id) {
      console.log(id);
      this.axios
        .post("/api/goods/findByCid", {
          cid: id
        })
        .then(res => {
          console.log(res);
          if (res.data.code === 500) {
            this.result = [];
          } else {
            for(let i of res.data){
              i.imageUrl = i.imgList[0]?i.imgList[0].url:null;
            }
            this.result = res.data;
            
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    showDetails(id) {
      this.$router.push({
        name: "GoodsDetails",
        params: {
          id: id
        }
        // path: '/goods/details',
        // query: {
        //   id: id
        // }
      });
    },
    addCart(id) {
      this.userId = sessionStorage.getItem("userId");
      this.axios
        .post("/api/cart", {
          uid: this.userId,
          gid: id
        })
        .then(res => {
          // console.log(res.data);
          if (res.data.code === 200) {
            this.Success("添加至购物车成功，请前往购物车查看");
          } else {
            this.Fail("添加至购物车失败");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    goToDetail(id) {
      sessionStorage.setItem("goodId", id);
      this.Success("页面将在三秒后跳转");
      setTimeout(() => {
        this.$router.push("/goods/details");
      }, 3000);
    }
  }
};
</script>
<style scoped>
.index {
  height: 100%;
  width: 100%;
  padding-top: 60px;
  box-sizing: border-box;
  overflow-x: hidden;
}
.index::-webkit-scrollbar {
  display: none;
}
.el-container {
  width: 100%;
  height: 100%;
  /* background-color: blue; */
}
.el-header,
.el-footer {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 30px; */
  overflow-x: hidden;
  padding: 0;
}
.el-main::-webkit-scrollbar {
  display: none;
}
/* 搜索框样式 */
.el-header .el-input {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border-color: #0d1a2e;
}
/* 轮播图样式 */
.rotation {
  width: 80%;
  /* height: 450px; */
  height: 700px;
  padding: 0;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
}
.el-carousel__mask {
  background-color: #e9eef3;
}

.el-carousel-item img {
  height: 80%;
  width: 100%;
  margin: 0;
}
.content {
  width: 80%;
  min-height: 100%;
  /* height: 100%; */
  margin: 0;
  padding: 40px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  text-align: left;
}
.goodsList {
  width: 25%;
  height: 50vh;
  padding: 28px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
}
.goodsList img {
  width: 70%;
  height: 20vh;
}
.goodsList:hover {
  box-shadow: 0 2px 10px rgb(0, 0, 0, 0.3);
}
.goodsList:hover div {
  display: block;
}
.goodsList:hover p {
  display: none;
}
.textSetting {
  display: inline-block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.buttonList {
  width: 100%;
  height: 60px;
  margin-top: 28px;
  display: none;
}
/* .buttonList:hover{
  display: block;
} */
.el-footer {
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0;
  background-color: white;
  line-height: 60px;
  text-align: right;
}
.el-footer span {
  margin-right: 28px;
}
</style>